// pages/imgupload/tailorphoto.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ], 


  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    console.log(wx.getSystemInfoSync()); 
    var canwidth=wx.getSystemInfoSync().windowWidth 
      const ctx = wx.createCanvasContext('myCanvas');
      const myimg = that.data.imgUrls[0]; 
      console.log(myimg);
      ctx.drawImage(myimg, 0, 0, canwidth,200)
      ctx.draw();
    this.data.pos={top:0,left:0}; 
  },
  yesphoto:function(){
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 100,
      height:100,
      destWidth: 100,
      destHeight: 100,
      canvasId: 'myCanvas',
      success: function (res) {
        console.log(res.tempFilePath)
      }
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  move:function(){
    var _this=this;
      if (_this.data.isDrag) {
        var x = _this.data.startPos.x-_this.data.lastPos.x,
          y = _this.data.lastPos.y-_this.data.startPos.y,
          newPos = {
            top: _this.data.oldPos.top - x,
            left: _this.data.oldPos.left - y,
          };
        _this.setData({
          pos: newPos
        })
      }
  },
  canvasStart:function(e){
    console.log(e);
    this.data.isDrag=true;
    this.data.oldPos = this.data.pos;
    this.data.startPos = this.data.lastPos=e.touches[0];
    this.move();
  },
   canvasMove: function (e) {
     this.data.lastPos=e.touches[0];
    //  console.log('startPos', this.data.startPos)
    //  console.log('lastPos', this.data.lastPos)
     this.move();
  },
   canvasEnd:function(){
     this.data.isDrag=false;
   }
})